<template>
  <div
    class="friend-item flex"
    v-if="user && user.nickname"
    @click="handleClickFriend"
  >
    <div class="avatar-wrapper flex f-jc-fe f-ai-c">
      <img :src="user.avatar" alt="" />
    </div>
    <div class="name-status-wrapper flex f-d-c">
      <span class="name">{{ user.nickname }}</span>
      <span class="status">[{{ user.online ? "在线" : "离线请留言" }}]</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "FriendItem",
  props: {
    user: {
      type: Object,
      default: () => null
    }
  },
  methods: {
    handleClickFriend() {
      const user = this.user;
      this.$emit("clickFriend", user);
    }
  }
};
</script>

<style scoped lang="less">
.friend-item {
  width: 100%;
  height: 10vh;

  .avatar-wrapper {
    width: 10vh;
    height: 10vh;
    img {
      border-radius: 50%;
      width: 70%;
      height: 70%;
    }
  }

  .name-status-wrapper {
    margin-left: 2vw;
    flex-grow: 1;
    height: 100%;
    .name {
      margin-top: 4%;
      font-size: 4.5vw;
      color: #333;
    }
    .status {
      margin-top: 1%;
      font-size: 2vw;
      color: gray;
    }
  }
}
</style>
